<template>
  <view class="myOrder">
    <!-- 自定义头部 -->
    <view class="head">我的订单</view>

    <!-- 一级标签栏：竞购订单 / 商城订单 -->
    <view class="tab-bar-primary">
      <view
        class="tab-item"
        :class="{ active: currentTab === 'sale' }"
        @click="switchTab('sale')"
      >
        竞购订单
      </view>

      <view
        class="tab-item"
        :class="{ active: currentTab === 'mall' }"
        @click="switchTab('mall')"
      >
        商城订单
      </view>
    </view>

    <!-- 二级标签栏：状态筛选（仅在选中某个类型时显示） -->
    <view v-if="currentTab" class="tab-bar-secondary">
      <view
        v-for="(status, index) in statusList"
        :key="index"
        class="status-item"
        :class="{ active: currentStatus === status.key }"
        @click="switchStatus(status.key)"
      >
        {{ status.name }}
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="content">
      <!-- 竞购订单内容 -->
      <view v-if="currentTab === 'sale'" class="order-list">
        <!-- 示例：待收货订单 -->
     <view class="order-item">
    <!-- 订单头部：编号 + 状态 -->
    <view class="order-header">
      <text>销售时间：2025-08-05</text>
      <text class="btn">已销售积分</text>
    </view>
    <!-- 商品信息区域 -->
    <view class="product-info">
      <!-- 商品图片 -->
      <image src="" class="product-img"></image>
      <view class="product-detail">
        <view class="product-name">欧莱雅 淡化细纹 水光面霜</view>
        <view class="product-spec">生产日期：2025-04-12</view>
        <view class="product-spec">保质期：3年</view>
        <view class="product-spec">数量：1件</view>
        <view class="product-spec">总计 <text style="color: #d3c39e;">0.00</text> </view>
      </view>
    </view>

  </view>
      </view>

      <!-- 商城订单内容 -->
      <view v-else class="order-list">
       <text>商场内容</text>
      </view>
    </view>

    <!-- 底部导航栏 -->
    <CustomTabBar :selected="2" />
  </view>
</template>

<script setup>
import CustomTabBar from "@/components/customTabBar.vue";
import classifyHead from "@/components/classifyHead.vue";
import { ref } from "vue";

// 一级标签：竞购订单 / 商城订单
const currentTab = ref("sale"); // 默认为竞购订单

// 二级标签：订单状态
const statusList = [
  { key: "all", name: "全部" },
  { key: "pending_pay", name: "待付款" },
  { key: "pending_action", name: "待操作" },
  { key: "pending_ship", name: "待发货" },
  { key: "pending_receive", name: "待收货" },
  { key: "completed", name: "已完成" }
];

const currentStatus = ref("all");

// 切换一级标签
const switchTab = (tab) => {
  currentTab.value = tab;
  currentStatus.value = "all"; // 切换一级标签时重置二级状态
};

// 切换二级状态
const switchStatus = (key) => {
  currentStatus.value = key;
};
</script>

<style lang="scss" scoped>
.myOrder {
  width: 100%;
  min-height: 100vh;
}
  .head {
  width: 100%;
  height: 155rpx;
  background:#5756b3;
  display: flex;
  align-items: center;
  justify-content: center;
   color: aliceblue;
    font-size: 50rpx;
}
/* 一级标签栏 */
.tab-bar-primary {
  display: flex;
  background-color: #dbd7d8;
  border-bottom: 1px solid #ddd;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  height: 120rpx;
}

.tab-bar-primary .tab-item {
  flex: 1;
  text-align: center;
  font-size: 30rpx;
  padding: 24rpx 0;
  color: #a4a4a4;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tab-bar-primary .tab-item.active {
  color: #fff;
  font-weight: bold;
  background-color: #9999fb;
}

/* 二级标签栏（状态筛选） */
.tab-bar-secondary {
  display: flex;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  padding: 10rpx 0;
  overflow-x: auto; /* 支持横向滚动 */
}

.status-item {
  padding: 10rpx 20rpx;
  font-size: 26rpx;
  color: #666;
  white-space: nowrap;
  border-radius: 10rpx;
  margin-right: 10rpx;
  transition: all 0.3s ease;
}

.status-item.active {
  color: #007aff;
padding-bottom: 1px solid #007aff;
}

/* 内容区域 */
.content {
  padding: 20rpx;
}

.order-list {
  margin-top: 20rpx;
}

.order-item {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  margin-bottom: 20rpx;
}

.order-header {
  display: flex;
  justify-content: space-between;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.btn {
  color: #d39438;
  font-size: 24rpx;
  padding: 4rpx 10rpx;
  border-radius: 6rpx;
}
.product-info{
  display: flex;
}
.product-detail{
  margin-left: 20rpx;
}
.product-img {
  width: 200rpx;
  height:200rpx;
  border-radius: 15rpx;
  margin-right: 20rpx;
  object-fit: cover;
  background: #333;
}

.product-name {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
  line-height: 1.5;
}
.product-spec{
color: #86858b;
}
.order-footer {
  display: flex;
  justify-content: space-between;
  font-size: 26rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.btn-group {
  display: flex;
  gap: 20rpx;
  margin-top: 10rpx;
}

.btn-small {
  font-size: 24rpx;
  padding: 8rpx 20rpx;
  background-color: #e0e0ff;
  color: #007aff;
  border-radius: 20rpx;
  border: none;
}
</style>